<template>
  <div class="app-container calendar-list-container">
      <el-form 
        label-position="right" 
        :model="selectTable"
        ref="addForm" 
        label-width="100px" 
        :inline="false"
        autocomplete="off"
        >
        <el-row>
          <el-col :md="6">
            <el-form-item label="站点Id" prop="websiteId" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.websiteId" maxLength="100" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :md="6">
            <el-form-item label="站点目录" prop="websiteList" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.websiteList" maxLength="100"></el-input>
            </el-form-item>
          </el-col>
          
        </el-row>
        
        <el-row>
          <el-col :md="12">
            <el-form-item label="站点名称" prop="websiteName" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.websiteName" maxLength="100"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        
        <el-row>
          <el-col :md="10">
            <el-form-item label="站点Logo" prop="logo1">
              <singleImage v-model="selectTable.logo1"></singleImage>
            </el-form-item>
          </el-col>
          <el-col :md="10">
            <el-form-item label="站点图标（建议尺寸100X100）" prop="logo2">
              <singleImage v-model="selectTable.logo2"></singleImage>
            </el-form-item>
          </el-col>
          <el-col :md="10">
            <el-form-item label="咨询热线" prop="hoteline">
              <el-input placeholder="请输入" v-model="selectTable.hoteline" maxLength="100"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="10">
            <el-form-item label="客服电话" prop="customer">
              <el-input placeholder="请输入" v-model="selectTable.customer" maxLength="100"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="微信名片" prop="webchartCard">
          <singleImage v-model="selectTable.webchartCard"></singleImage>
        </el-form-item>

        <el-row>
          <el-col :md="10">
            <el-form-item label="新浪微博地址" prop="mcrioBlog">
              <el-input placeholder="请输入" v-model="selectTable.mcrioBlog" maxLength="100"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="10">
            <el-form-item label="版权信息" prop="versioninfo" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.versioninfo" maxLength="100"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="20">
            <el-form-item label="其它信息" prop="otherinformation" :rules ="[rule[0]]">
              <editor v-model="selectTable.otherinformation"
                v-if="!pload"
                :config="{initialFrameHeight:100}">
              </editor>
            </el-form-item>
          </el-col>
          <el-col label-width="160px" :md="16">
            <el-form-item label="备注" prop="remark">
              <el-input placeholder="请输入" v-model="selectTable.remark" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="16">
            <el-form-item label-width="160px" label="SEO标题" prop="seotitle" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.seotitle" maxLength="100"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="16">
            <el-form-item label-width="160px" label="SEO关键词" prop="seokeyword" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.seokeyword" maxLength="100"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="16">
            <el-form-item label-width="160px" label="SEO描述" prop="seodescptition" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.seodescptition" maxLength="100"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>    
          <el-col :span="14">
            <el-form-item label-width="160px" label="PCTags展示模板" prop="tagsTempletId">
              <tplselect v-model="selectTable.tagsTempletId"></tplselect>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label-width="160px" label="WAPTags展示模板" prop="mTempletId">
              <tplselect v-model="selectTable.mTempletId"></tplselect>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer" v-loading="pload">
        <el-button type="primary" @click="submitForm('addForm')">确认保存</el-button>
      </div>
  </div>
</template>

<script>
import { siteGet, siteSet } from '@/utils/api'
import singleImage from '@/components/Upload/singleImage'
import tplselect from '../sysTpl/tplSelect'
export default {
  components: {
    editor: () => import('@/components/Ueditor'),
    tplselect,
    singleImage
  },
  created() {
    this.getData()
  },
  computed: {
    title() {
      if (this.id) {
        return '修改'
      } else {
        return '添加'
      }
    }
  },
  data() {
    return {
      pload: false,
      rule: [
        { required: true, message: '必填项', trigger: 'change' }
      ],
      selectTable: {}
    }
  },
  methods: {
    async submitForm(formName) {
      await this.$refs[formName].validate()
      try {
        this.pload = true
        await siteSet(this.selectTable)
        this.$notify({ title: '操作成功', type: 'success', duration: 5000 })
        this.getData()
      } catch (e) {
        this.pload = false
      }
    },
    async getData() {
      this.pload = true
      const Datas = await siteGet()
      this.selectTable = Datas
      this.pload = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .footer {
    padding: 50px 0;
    text-align: center;
    .el-button {
      padding: 15px 30px;
    }
  }
</style>